<template>
	<div class="box_">
		<el-tabs v-model="activeName" class="tabs" type="card">
			<el-tab-pane label="现货" name="first">
				<el-table :data="listData" style="width: 100%">
					<el-table-column label="名称">
						<template #default="scope">
							<div class="flex items-center pt-20px pb-20px">
								<img :src="scope.row.icon" alt="" />
								<p class="ml-5px">
									<span>{{ scope.row.coin }}</span>
									<span class="text-light-900">/USDT</span>
								</p>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="price" label="最新价" sortable />
					<el-table-column prop="deal" label="24h成交量" sortable />
					<el-table-column label="当日涨跌">
						<template #default="scope">
							<span :class="{ 'text-red': !scope.row.up, 'text-green': scope.row.up }">
								{{ scope.row.up ? '+' + scope.row.rate :
									'-' + scope.row.rate }}
							</span>
						</template>
					</el-table-column>
					<el-table-column label="交易视图" align="right">
						<template #default="scope">
							<div>
								<img src="/purchase/k-line.svg" alt="" class="w-20px h-20px">
							</div>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="合约" name="second">
				<el-table :data="listData" style="width: 100%">
					<el-table-column label="名称">
						<template #default="scope">
							<div class="flex items-center pt-20px pb-20px">
								<img :src="scope.row.icon" alt="" />
								<p class="ml-5px">
									<span>{{ scope.row.coin }}</span>
									<span class="text-light-900">/USDT</span>
								</p>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="price" label="最新价" sortable />
					<el-table-column prop="deal" label="24h成交量" sortable />
					<el-table-column label="当日涨跌">
						<template #default="scope">
							<span :class="{ 'text-red': !scope.row.up, 'text-green': scope.row.up }">
								{{ scope.row.up ? '+' + scope.row.rate :
									'-' + scope.row.rate }}
							</span>
						</template>
					</el-table-column>
					<el-table-column label="交易视图" align="right">
						<template #default="scope">
							<div>
								<img src="/purchase/k-line.svg" alt="" class="w-20px h-20px">
							</div>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
		</el-tabs>
		<div class="search">
			<el-input v-model="searchData" class="w-100px" placeholder="搜索" :prefix-icon="Search" />
		</div>
	</div>
</template>
<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue'
const activeName = ref('first')

// 搜索数量
const searchData = ref('')

// 列表数据
const listData = ref([
	{
		icon: '/purchase/btc.svg',
		coin: 'BTC',
		price: '＄90,197.85',
		deal: '＄90,197.85',
		up: false,
		rate: '0.52%'
	},
	{
		icon: '/purchase/eth.svg',
		coin: 'BTC',
		price: '＄70,197.85',
		deal: '＄90,197.85',
		up: false,
		rate: '0.52%'
	},
	{
		icon: '/purchase/trx.svg',
		coin: 'BTC',
		price: '＄90,197.85',
		deal: '＄90,197.85',
		up: true,
		rate: '0.52%'
	},
	{
		icon: '/purchase/usdt.svg',
		coin: 'BTC',
		price: '＄80,197.85',
		deal: '＄90,197.85',
		up: false,
		rate: '0.52%'
	}
])

</script>
<style lang="scss" scoped>
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item,
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav,
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav,
::v-deep .el-tabs--card>.el-tabs__header {
	border: none !important;
	color: #000000 !important;
}

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item {
	padding: 0 20px !important;
	font-size: 14px !important;
}

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav {
	border-radius: 8px 8px 8px 8px !important;
	border: 1px solid #E5E6EB !important;
}

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
	position: relative !important;
	/* 确保伪元素基于当前元素定位 */
	z-index: 1 !important;
	/* 确保原元素在伪元素上方 */
	color: #E5E6EB !important;
	display: flex !important;
	justify-content: center !important;
}

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active::after {
	content: "";
	/* 必须设置 content 属性，即使为空 */
	position: absolute !important;
	/* 设置绝对定位 */
	// top: 10%;
	/* 定位到元素的顶部 */
	// left: 10%;
	/* 定位到元素的左侧 */
	width: 90% !important;
	/* 背景宽度与原元素一致 */
	height: 90% !important;
	/* 背景高度与原元素一致 */
	background: #114CEE !important;
	border-radius: 8px 8px 8px 8px !important;
	/* 设置背景颜色，这里使用半透明的黄色 */
	z-index: -1 !important;
	/* 确保背景在原元素的下方 */
}

.box_ {
	margin-top: 30px;
	margin-bottom: 30px;
	position: relative;

	.search {
		position: absolute;
		right: 0;
		top: 0;
	}
}
</style>
